<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background: #222;
        }
        .panel {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            box-shadow: inset 0 0 0 99px #222, inset 0 0 0 100px rgba(0, 255, 0, 0.2), inset 0 0 0 199px #222, inset 0 0 0 200px rgba(0, 255, 0, 0.2), inset 0 0 0 299px #222, inset 0 0 0 300px rgba(0, 255, 0, 0.2);
            border-radius: 50%;
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            overflow: hidden;
            width: 800px;
            height: 800px;
            border: 1px solid #393;
        }
        .panel .scanner {
            -webkit-animation: scanning 6s infinite linear;
            animation: scanning 6s infinite linear;
            background-image: -webkit-linear-gradient(bottom, #0f0 0%, rgba(0, 0, 0, 0) 50%);
            background-image: -webkit-linear-gradient(bottom left, #0f0 0%, rgba(0, 0, 0, 0) 50%);
            background-image: linear-gradient(to top right, #0f0 0%, rgba(0, 0, 0, 0) 50%);
            -webkit-transform-origin: top left;
            -ms-transform-origin: top left;
            transform-origin: top left;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 800px;
            height: 800px;
            border-left: 1px solid rgba(0, 255, 0, 0.1);
        }
        .panel:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 50%;
            width: 1px;
            height: 100%;
            background: rgba(0, 255, 0, 0.2);
        }
        .panel:after {
            content: '';
            display: block;
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            background: rgba(0, 255, 0, 0.2);
        }
        .panel .something {
            list-style: none;
        }
        .panel .something li {
            -webkit-animation: target 6s infinite linear;
            animation: target 6s infinite linear;
            border-radius: 50%;
            box-shadow: 0 0 10px #afa;
            filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
            opacity: 0;
            display: block;
            position: absolute;
            width: 10px;
            height: 10px;
            background: #afa;
        }
        .panel .something li:nth-child(1) {
            -webkit-animation-delay: 2250ms;
            animation-delay: 2250ms;
            top: 30%;
            left: 30%;
        }
        .panel .something li:nth-child(2) {
            -webkit-animation-delay: 3200ms;
            animation-delay: 3200ms;
            top: 15%;
            left: 60%;
        }
        .panel .something li:nth-child(3) {
            -webkit-animation-delay: 5050ms;
            animation-delay: 5050ms;
            top: 70%;
            left: 80%;
        }
        .panel .something li:nth-child(4) {
            -webkit-animation-delay: 1100ms;
            animation-delay: 1100ms;
            top: 60%;
            left: 20%;
        }
        .panel .something li:nth-child(5) {
            -webkit-animation-delay: 3000ms;
            animation-delay: 3000ms;
            top: 30%;
            left: 50%;
        }
        @-webkit-keyframes scanning {
            100% {
                -ms-transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes scanning {
            100% {
                -ms-transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @-webkit-keyframes target {
            1% {
                filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
                opacity: 0.5;
                -ms-transform: scale(2.5);
                -webkit-transform: scale(2.5);
                transform: scale(2.5);
            }
            3% {
                filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
                opacity: 1;
                -ms-transform: scale(1.5);
                -webkit-transform: scale(1.5);
                transform: scale(1.5);
            }
            60% {
                filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
                opacity: 0;
                -ms-transform: scale(0.6);
                -webkit-transform: scale(0.6);
                transform: scale(0.6);
            }
        }
        @keyframes target {
            1% {
                filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
                opacity: 0.5;
                -ms-transform: scale(2.5);
                -webkit-transform: scale(2.5);
                transform: scale(2.5);
            }
            3% {
                filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
                opacity: 1;
                -ms-transform: scale(1.5);
                -webkit-transform: scale(1.5);
                transform: scale(1.5);
            }
            60% {
                filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
                opacity: 0;
                -ms-transform: scale(0.6);
                -webkit-transform: scale(0.6);
                transform: scale(0.6);
            }
        }
    </style>
</head>
<body>
<div class="panel">
    <div class="scanner"></div>
    <ul class="something">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>